<template>
	<VantNav title="登录" />
	
	<div class="login">
		<van-form @submit="onSubmit">
		  <van-cell-group inset>
		    <van-field
		      v-model.trim="tel"
		      name="tel"
		      label="手机号"
		      placeholder="手机号"
		    />
		    <van-field
		      v-model.trim="password"
		      type="password"
		      name="password"
		      label="密码"
		      placeholder="密码"
		    />
			
			<van-field name="role" label="角色">
			  <template #input>
			    <van-radio-group v-model="role" direction="horizontal">
			      <van-radio :name="1">学生</van-radio>
			      <van-radio :name="2">教师</van-radio>
			    </van-radio-group>
			  </template>
			</van-field>
		  </van-cell-group>
		  
		  
		  
		  <div style="margin: 16px;">
		    <van-button round block type="primary" native-type="submit">提交</van-button>
		  </div>
		  
		  <van-divider content-position="right"><a @click="$router.push({name: 'register'})">没有账号，立即注册</a></van-divider>
		  
		</van-form>
	</div>
	
</template>

<script>
import VantNav from '@/components/VantNav.vue' ;

export default {
	components:{
		VantNav ,
	},
	data() {
		return {
			tel: "" ,
			password: "", 
			role: 1, 
		}
	},
	methods: {
		onSubmit(data) {
			if (this.tel === "") {
				// 进行友好提示
				this.$layer.msg("手机号不允许为空", {offset: '100px'})
				return ;
			}
			if (!/^1[3-9]\d{9}$/.test(this.tel)) {
				this.$layer.msg("手机号格式不正确", {offset: '100px'})
				return ;
			}
			
			if (this.password === "") {
				this.$layer.msg("密码不允许为空", {offset: '160px'})
				return ;
			}
			
		}
	}
}	

</script>

<style scoped>

.login {
	margin-top: 50px;
}

</style>